<template>
  <div>
    <!-- <my-goods :title="list[0].name" :price="list[0].price" :desc="list[0].desc"/>
    <my-goods :title="list[1].name" :price="list[1].price" :desc="list[1].desc"/>
    <my-goods :title="list[2].name" :price="list[2].price" :desc="list[2].desc"/>
    <my-goods :title="list[3].name" :price="list[3].price" :desc="list[3].desc"/> -->

    <my-goods
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :price="item.price"
      :desc="item.desc"
      @cut="fn(item, $event)"
    />
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue'
export default {
  components: {
    MyGoods
  },

  data () {
    return {
      list: [
        { id: 11, name: '潮汕粥', price: 99, desc: '营养美味' },
        { id: 33, name: '猪脚饭', price: 15, desc: '肥肥的' },
        { id: 39, name: '沙县小吃', price: 14, desc: '吃蒸饺和汤' },
        { id: 434, name: '自选快餐', price: 14, desc: '随便选' }
      ]
    }
  },
  methods: {
    fn (obj, num) {
      console.log('收到通知了', num)
      obj.price -= num
    }
  }
}
</script>

<style></style>
